<template>
  <view class="order_state_com">
    <view class="state_box" :style="state[value].style">
      <image class="state_icon" :src="state[value].icon" mode=""></image>
      <view class="state_info">
        <view class="state_name">
          <text class="title">{{ state[value].title }}</text>
          <u-count-down
						v-if="info.toBePaySonState == 3"
						separator="zh"
						:separator-size="20"
						separator-color="#fff"
						show-border
						border-color="#fff"
						:show-days="false"
						:timestamp="info.downTime"
						bg-color="#fff"
						font-size="25"
					></u-count-down>
        </view>
        <!-- 待支付 -->
        <view class="state_msg u-line-2" v-if="value === 0">{{
          state[value].msg[info.toBePaySonState]
        }}</view>
        <!-- 已取消 -->
        <view class="state_msg u-line-2" v-else-if="value === -1">{{
          state[value].msg[info.orderCancelType]
        }}</view>
        <view class="state_msg u-line-2" v-else>{{
          state[value].msg
        }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: 0
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  created() {},
  data() {
    return {
      state: {
        0: {
          title: this.$t('locales.toBePaid'),
          icon: 'http://img.druglots.cn/daizhifu.png',
          msg: {
            0: this.$t('locales.orderState1'),
            1: this.$t('locales.orderState2'),
            2: this.$t('locales.orderState3'),
            3: this.$t('locales.orderState4'),
            4: this.$t('locales.orderState5'),
            5: this.$t('locales.orderState6'),
          },
          style: {
            background: 'linear-gradient(90deg, #FF4234, #FF5C27)'
          }
        },
        1: {
          title: this.$t('locales.toBeDelivered'),
          icon: 'http://img.druglots.cn/daifahuo.png',
          msg: this.$t('locales.customerPaidReady'),
          style: {
            background: 'linear-gradient(90deg, #396AFC, #3190FD)'
          }
        },
        2: {
          title: this.$t('locales.goodsToBeReceived'),
          icon: 'http://img.druglots.cn/daishouhuo.png',
          msg: this.$t('locales.hboosWfctrg'),
          style: {
            background: 'linear-gradient(90deg, #396AFC, #3190FD)'
          }
        },
        3: {
          title: this.$t('locales.transactionCompletion'),
          icon: 'http://img.druglots.cn/yishouhuo.png',
          msg: this.$t('locales.tchrtgattsuccess'),
          style: {
            background: 'linear-gradient(90deg, #396AFC, #3190FD)'
          }
        },
        '-1': {
          title: this.$t('locales.cancelled'),
          icon: 'http://img.druglots.cn/yiquxiao.png',
          msg: {
            1: this.$t('locales.orderState7'),
            2: this.$t('locales.orderState8'),
            3: this.$t('locales.orderState9'),
            4: this.$t('locales.orderState10'),
          },
          style: {
            background: 'linear-gradient(90deg, #9A9999, #C9C9C9, #CACACA)'
          }
        },
        '-2': {
          title: this.$t('locales.cancelling'),
          icon: 'http://img.druglots.cn/yiquxiao.png',
          msg: this.$t('locales.Bingcancelled'),
          style: {
            background: 'linear-gradient(90deg, #9A9999, #C9C9C9, #CACACA)'
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order_state_com {
  font-size: 24rpx;
  color: #fff;
  margin-bottom: 20rpx;
  .state_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 170rpx;
    padding: 0 60rpx;
    box-sizing: border-box;
    .state_icon {
      width: 92rpx;
      height: 92rpx;
    }
    .state_info {
      flex: 1;
      margin-left: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 92rpx;
      .state_name {
        display: flex;
        align-items: center;
        .title {
          display: inline-block;
          margin-right: 20rpx;
          font-size: 30rpx;
        }
      }
      .state_msg {
        width: 500rpx;
      }
    }
  }
}
</style>
